<template>
  <el-container>
    <el-aside style="width: 260px">
      <h1 class="menuTitle">消息</h1>
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <el-menu-item index="1">
          <i class="el-icon-user"></i>
          <span slot="title">系統通知</span>
          <el-badge
            v-if="nonSystemMessageList.length != 0"
            :value="nonSystemMessageList.length"
            class="badge-item"
          ></el-badge>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">团队通知</span>
          <el-badge
            v-if="nonTeamMessageList.length != 0"
            :value="nonTeamMessageList.length"
            class="badge-item"
          ></el-badge>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">留言消息</span>
          <el-badge
            v-if="nonLeaveMessageList.length != 0"
            :value="nonLeaveMessageList.length"
            class="badge-item"
          ></el-badge>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-document"></i>
          <span slot="title">队内聊天</span>
          <el-badge
            v-if="nonOtherMessageList.length != 0"
            :value="nonOtherMessageList.length"
            class="badge-item"
          ></el-badge>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span v-if="activeMenuIndex == 1">系统消息</span>
          <span v-if="activeMenuIndex == 2">团队消息</span>
          <span v-if="activeMenuIndex == 3">留言消息</span>
          <span v-if="activeMenuIndex == 4">队内聊天</span>
          <el-button
              type="primary"
              style="float: right;" 
              class="sentMessagButton"
              @click="openMessageDialog('系统消息发送', activeMenuIndex)"
              >发送消息</el-button
            >
        </div>
        <div>
          <div v-if="activeMenuIndex == '1'">
            <!-- <el-button
              type="primary"
              class="sentMessagButton"
              @click="openMessageDialog('系统消息发送', 1)"
              >发送消息</el-button
            > -->
            <message
              ref="systemMessage"
              :listAchieveMessage="listAchieveMessage"
              :getActiveName="getTeamActiveName"
              :alrMessageList="alrSystemMessageList"
              :nonMessageList="nonSystemMessageList"
            ></message>
          </div>
          <div v-if="activeMenuIndex == '2'">
            <div>
              <!-- <el-button
                type="primary"
                class="sentMessagButton"
                @click="openMessageDialog('团队消息发送', 2)"
                >发送消息</el-button
              > -->

              <message
                ref="teamMessage"
                :listAchieveMessage="listAchieveMessage"
                :getActiveName="getTeamActiveName"
                :alrMessageList="alrTeamMessageList"
                :nonMessageList="nonTeamMessageList"
              ></message>
            </div>
          </div>
          <div v-if="activeMenuIndex == '3'">
            <div>
              <!-- <el-button
                type="primary"
                class="sentMessagButton"
                @click="openMessageDialog('留言消息发送', 3)"
                >发送消息</el-button
              > -->

              <message
                ref="leaveMessage"
                :listAchieveMessage="listAchieveMessage"
                :getActiveName="getLeaveActiveName"
                :alrMessageList="alrLeaveMessageList"
                :nonMessageList="nonLeaveMessageList"
              ></message>
            </div>
          </div>
          <div v-if="activeMenuIndex == '4'">
            <div>
              <teamChat></teamChat>
            </div>
          </div>
        </div>
      </el-card>
    </el-main>
    <el-drawer
      :title="messageDiolagTitle"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="50%"
    >
      <el-form
        :model="messageForm"
        label-width="100px"
        ref="messageForm"
        style="margin-top: 20px"
      >
        <el-form-item label="接收人">
          <el-select
            v-model="messageForm.achieveUsernameList"
            multiple
            filterable
            default-first-option
            placeholder="请选择消息接收人"
            class="messageForm"
          >
            <el-option
              v-for="user in achieveUserOptions"
              :key="user.id"
              :label="user.userName"
              :value="user.userName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="消息内容">
          <el-input
            class="messageForm"
            rows="10"
            type="textarea"
            v-model="messageForm.content"
            placeholder="请输入要发送的消息内容，不超过100个字"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sentMessage()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-container>
</template>
<script>
import Message from "@/components/Message/index";
import TeamChat from "@/components/TeamChat/index";
import { listMessage, addMessage } from "@/api/message";
import { listPage } from "@/api/user";
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      messageDiolagTitle: "",
      tabTitle: "",
      activeMenuIndex: "1",
      alrMessageList: [],
      nonMessageList: [],
      alrSystemMessageList: [],
      nonSystemMessageList: [],
      alrTeamMessageList: [],
      nonTeamMessageList: [],
      alrLeaveMessageList: [],
      nonLeaveMessageList: [],
      alrOtherMessageList: [],
      nonOtherMessageList: [],
      systemActiveName: "",
      teamActiveName: "",
      leaveActiveName: "",
      otherActiveName: "",
      messageForm: {
        sentUsername: "",
        sentTeamname: "",
        achieveUsernameList: [],
        achieveTeamName: "",
        content: "",
        messageType: "",
        isRead: "",
      },
      achieveUserOptions: [],
    };
  },
  components: {
    Message,
    TeamChat
  },
  mounted() {
    this.listAchieveMessage();
  },
  methods: {
    handleSelect(key) {
      this.activeMenuIndex = key;
    },
    getSystemActiveName() {
      this.systemActiveName = this.$refs.systemMessage.activeName;
    },
    getTeamActiveName() {
      this.teamActiveName = this.$refs.teamMessage.activeName;
    },
    getLeaveActiveName() {
      this.leaveActiveName = this.$refs.leaveMessage.activeName;
    },
    getOtherActiveName() {
      this.otherActiveName = this.$refs.otherMessage.activeName;
    },
    async listAchieveMessage() {
      (this.nonMessageList = []), (this.alrSystemMessageList = []);
      this.nonSystemMessageList = [];
      this.alrTeamMessageList = [];
      this.nonTeamMessageList = [];
      this.alrLeaveMessageList = [];
      this.nonLeaveMessageList = [];
      this.alrOtherMessageList = [];
      this.nonOtherMessageList = [];
      const param = {
        achieveUsername: this.$store.getters.name,
        achieveTeamName: this.$store.getters.teamName,
        isRead: 1,
      };
      //查询出所有已读消息
      await listMessage(param).then((res) => {
        if (res.code == 0) {
          this.alrMessageList = res.data;
        }
      });
      this.alrMessageList.forEach((alrMessage) => {
        if (alrMessage.messageType == 1) {
          this.alrSystemMessageList.push(alrMessage);
        } else if (alrMessage.messageType == 2) {
          this.alrTeamMessageList.push(alrMessage);
        } else if (alrMessage.messageType == 3) {
          this.alrLeaveMessageList.push(alrMessage);
        } else {
          this.alrOtherMessageList.push(alrMessage);
        }
      });
      param.isRead = 0;
      await listMessage(param).then((res) => {
        if (res.code == 0) {
          this.nonMessageList = res.data;
        }
      });
      this.nonMessageList.forEach((nonMessage) => {
        if (nonMessage.messageType == 1) {
          this.nonSystemMessageList.push(nonMessage);
        } else if (nonMessage.messageType == 2) {
          this.nonTeamMessageList.push(nonMessage);
        } else if (nonMessage.messageType == 3) {
          this.nonLeaveMessageList.push(nonMessage);
        } else {
          this.nonOtherMessageList.push(nonMessage);
        }
      });
    },
    openMessageDialog(title, messageType) {
      console.log("发送消息"+messageType);
      this.messageDiolagTitle = title;
      this.messageForm.messageType = messageType;
      console.log(this.messageForm.messageType);
      this.drawer = true;
      this.listTeamUser();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    listTeamUser() {
      const param = {
        page: 1,
        limit: 100,
        teamName: this.$store.getters.teamName,
      };
      listPage(param).then((res) => {
        console.log(res.data);
        this.achieveUserOptions = res.data;
      });
    },
    resetForm() {
      this.messageForm.content = "";
      this.messageForm.achieveUsernameList = [];
    },
    sentMessage() {
      const param = {
        sentUsername: this.$store.getters.name,
        sentTeamName: this.$store.getters.teamName,
        achieveUsername: "",
        achieveTeamName: this.$store.getters.teamName,
        content: this.messageForm.content,
        messageType: this.messageForm.messageType,
        isRead: 0,
      };
      console.log(param.messageType);
      this.messageForm.achieveUsernameList.forEach((achieveUsername) => {
        param.achieveUsername = achieveUsername;
        addMessage(param).then((res) => {
          if (res.code == 0) {
            this.$notify({
              title: "成功",
              message: "消息发送成功",
              type: "success",
            });
          }
        });
      });
      this.listAchieveMessage();
      this.drawer = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-aside {
  background-color: white;
  color: #333;
  height: 93vh;
  padding: 0;
  width: 10%;
}

.el-main {
  background-color: white;
  color: #333;
  text-align: left;
  height: 100vh;
  overflow: hidden;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.badge-item {
  float: right;
}
.sentMessagButton {
  margin-left: 100px;
}
.messageForm {
  width: 85%;
}
.el-card {
  height: 100%;
}
.menuTitle {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 20px;
}
</style>